<template>
	<view class="container">
		<view class="votebox">
			<view class="voteitem bgWhite radius5 plr10 " v-for="(i,n) in datalist" :key="n">
				<view class=" justify-between align-center">
					<view class="userinfo align-center">
						<image :src="i.avatar" mode=""></image>
						{{i.username}}
					</view>
					<text class="status">投票中...</text>
				</view>
				<view class="title align-center mtb10">
					<image src="/static/images/问@2x.png"></image> {{i.title}}
				</view>
				<block v-if="i.comment&&i.comment.length">
				<view  v-for="(item,index) in i.comment" class="replyData mb10 radius5 align-center justify-between">
					<view>{{item.content}}</view>
					<!-- <text @click="reply(item)" class="reply">回复</text> -->
				</view>
				</block>
				
					<view class="align-center justify-between mt10">
						<text>共{{i.commentCount}}条</text>
						<text @click="reply(i)" class="reply">回复</text>
					</view>
				
			</view>
		</view>

		<uv-popup ref="popup" :close-on-click-overlay="false" mode="center" round="15">
			<view class="align-center justify-center ft18 "
				style="height: 300rpx;width: 400rpx;text-align: center;color: #666;">
				合格证信息有误，
				<br />
				请重新扫描
			</view>
		</uv-popup>
		<customTab :active="3"></customTab>
		<uv-modal ref="modal" :asyncClose="true" title="回复"  :showCancelButton="true">
			<view class="slot-content">
				<uv-textarea v-model="CommentValue" placeholder="请输入内容"></uv-textarea>

			</view>
			<template v-slot:confirmButton>
								
							<button type="primary" @click="closeModal">确定</button>
			</template>
		</uv-modal>

	</view>
</template>

<script>
	import customTab from '../../components/customTab.vue';
	let app = getApp();
	export default {
		components: {
			customTab
		},
		data() {
			return {
				act: 0,
				datalist: [],
				certificateNum: '',
				CommentValue: "",
				itemid:""
			}
		},
		onLoad(opt) {
			console.log(opt)
			this.getList()


		},
		mounted() {


		},

		methods: {
			reply(item){
				this.itemid=item.id
				if(uni.getStorageSync('logintoken')){
					this.$refs.modal.open()
				}else{
					uni.showModal({
						title:'提示',
						content:'请先登录',
						success:function(res){
							if(res.confirm){
								uni.reLaunch({
									url:'/pages/login/login'
								})
							}
						}
					})
				}
				
			},
				
			closeModal(){
				console.log(333)
				if(!this.CommentValue) return this.$utils.msg('请输入回复内容')
				this.$api.addComment({
					content:this.CommentValue,
					comment_user_id:uni.getStorageSync('userInfo').id,
					id:this.itemid,
					
				}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.$utils.msg('回复成功')
						this.$refs.modal.close()
					}
					
					
				})
				
			},
			getList() {
				this.$api.inertAct().then(res => {
					console.log(res)

					this.datalist = res.data.data
				})
			},
		}





	}
</script>
<style scoped lang="scss">
	.container {
		height: 100vh;

		padding-top: 40rpx;
	}

	.votebox {
		padding: 36rpx 30rpx;
	}

	.voteitem {
		padding-top: 40rpx;
		padding-bottom: 30rpx;
		font-size: 24rpx;
		color: #B3B3B3;
	}

	.userinfo {
		image {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}

	.title {
		font-weight: bold;
		font-size: 30rpx;
		color: #010101;

		image {
			width: 40rpx;
			height: 34rpx;
			margin-right: 10rpx;
		}
	}

	.replyData {
		padding: 30rpx 20rpx;
		background: #F5F6FD;
		font-weight: bold;
		font-size: 24rpx;

	}

	.reply {
		color: #3E59F2 !important;
	}
	.slot-content{
		width: 600rpx;
	}
</style>